import React, { Component, useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts';

export default ({ data }) => {
  const kpiRef = useRef();
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(kpiRef.current);
    const { buildCount = 0, buyCount = 0 } = data;
    // 指定图表的配置项和数据
    var option = {
      title: { text: '项目性质' },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
      },

      yAxis: {
        type: 'value',
      },
      xAxis: { type: 'category', data: ['建设', '保障'] },
      series: [
        {
          name: '已完成',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series',
          },
          data: [buildCount, buyCount],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }, [data]);

  return <div ref={kpiRef} style={{ height: 300 }}></div>;
};
